<template>
  <div class="home" style="width: 100%">

    <div class="layoutHome" style="margin-top: 2.3%;width: 100%;height: 80%">
      <el-row>
        <el-col :span="6">
          <div :style="{ height: 30 + 'vh' }">
            
            <div class="monitor-panel">
              <p class="panel-title">智慧大棚土壤质量实时监测</p>
              <div style="display: flex; height: 10vh; margin-top: -15%;justify-content: center">
              </div>

              <t-swiper :duration="300" :interval="2500">
                <t-swiper-item>
                  <div style="display: flex; height: 16vh">
                    <div style="width: 33.3%; height: 100%">
                      <p class="cubeDigit" style="
                            margin-left: 5%;
                            margin-top: 7%;
                            position: absolute;
                          ">
                        {{ realData[2] }}
                      </p>
                      <p class="cubeDigit" style="
                            color: greenyellow;
                            text-align: left;
                            font-size: 15px;
                            margin-left: 16%;
                            margin-top: 8%;
                            position: absolute;
                          ">
                        °C
                      </p>

                      <p v-if="realData[2] >= 18 && realData[2] <= 22
          " class="cubeDigit status-tag">
                        优
                      </p>
                      <p v-else class="cubeDigit status-tag">
                        良
                      </p>

                      <div class="sensor-background"></div>
                      <div class="sensor-label">
                        <p>土壤温度</p>
                      </div>
                    </div>

                    <div style="width: 33.3%; height: 100%">
                      <p class="cubeDigit" style="
                            margin-left: 5%;
                            margin-top: 7%;
                            position: absolute;
                          ">
                        {{ realData[3] }}
                      </p>
                      <p class="cubeDigit" style="
                            color: greenyellow;
                            text-align: left;
                            font-size: 15px;
                            margin-left: 13%;
                            margin-top: 8%;
                            position: absolute;
                          ">
                        %RH
                      </p>

                      <p v-if="realData[3] >= 70 && realData[3] <= 75
          " class="cubeDigit status-tag">
                        优
                      </p>
                      <p v-else class="cubeDigit status-tag">
                        良
                      </p>

                      <div class="sensor-background"></div>
                      <div class="sensor-label">
                        <p>土壤湿度</p>
                      </div>
                    </div>

                    <div style="width: 33.3%; height: 100%">
                      <p class="cubeDigit" style="
                            margin-left: 5%;
                            margin-top: 7%;
                            position: absolute;
                          ">
                        {{ realData[4] }}
                      </p>
                      <p class="cubeDigit" style="
                            color: greenyellow;
                            text-align: left;
                            font-size: 15px;
                            margin-left: 13%;
                            margin-top: 8%;
                            position: absolute;
                          ">
                        MS/CM
                      </p>

                      <p v-if="realData[4] >= 1.5 && realData[4] <= 2.5
          " class="cubeDigit status-tag">
                        优
                      </p>
                      <p v-else class="cubeDigit status-tag">
                        良
                      </p>

                      <div class="sensor-background"></div>
                      <div class="sensor-label">
                        <p>土壤电导率</p>
                      </div>
                    </div>
                  </div>
                </t-swiper-item>
                <t-swiper-item>
                <div style="display: flex; height: 16vh">

                  <div style="width: 33.3%; height: 100%">
                    <p class="cubeDigit" style="
                            margin-left: 5%;
                            margin-top: 7%;
                            position: absolute;
                          ">
                      {{ realData[0] }}
                    </p>
                    <p class="cubeDigit" style="
                            color: greenyellow;
                            text-align: left;
                            font-size: 15px;
                            margin-left: 13%;
                            margin-top: 8%;
                            position: absolute;
                          ">
                      Mg/kg
                    </p>

                    <p v-if="realData[0] >= 20 && realData[0] <= 30"
                       class="cubeDigit status-tag">
                      优
                    </p>
                    <p v-else class="cubeDigit status-tag">
                      良
                    </p>

                    <div class="sensor-background"></div>
                    <div class="sensor-label">
                      <p>土壤pH值</p>
                    </div>
                  </div>
                  <div style="width: 33.3%; height: 100%">
                    <p class="cubeDigit" style="
                            margin-left: 5%;
                            margin-top: 7%;
                            position: absolute;
                          ">
                      {{ realData[1] }}
                    </p>
                    <p class="cubeDigit" style="
                            color: greenyellow;
                            text-align: left;
                            font-size: 15px;
                            margin-left: 13%;
                            margin-top: 8%;
                            position: absolute;
                          ">
                      Mg/kg
                    </p>

                    <p v-if="realData[1] >= 20 && realData[1] <= 30"
                       class="cubeDigit status-tag">
                      优
                    </p>
                    <p v-else class="cubeDigit status-tag">
                      良
                    </p>

                    <div class="sensor-background"></div>
                    <div class="sensor-label">
                      <p>土壤含氮量</p>
                    </div>
                  </div>


                </div>
              </t-swiper-item>
              </t-swiper>
            </div>
          </div>
          <div :style="{ height: 24.2 + 'vh', marginTop: '1%' }">
            <div style="
              height: 140%;
              margin-left: 5%;
              width: 94%;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgb(52, 58, 64);
              border-radius: 20px;
            ">
              <SoilRadarChart :realData="realData" style="width: 90%; height: 90%;" />
            </div>
          </div>
          <div :style="{ height: 24.2 + 'vh', marginTop: '1%' }">
            <div style="
              height: 150%;
              margin-left: -7%;
              margin-top: 6%;
              width: 118%;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgb(52, 58, 64);
              border-radius: 20px;
              transform: scale(0.8);
            ">
              <SoilMoistureBarChart style="width: 90%; height: 90%;align-items: center;justify-content:center" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="center-panel">
            <dv-border-box11 
              title="智慧大棚实时监控" 
              :title-width="400" 
              :animate="true" 
              :color="['#1fada0', '#052027']"
            >
              <div class="camera-container">
                <div class="camera-view">
                  <EZUIKitPlayer />
                </div>
                <div class="camera-controls-wrapper">
                  <div class="controls-background"></div>
                  <CameraControl :deviceId="1" class="camera-controls-center" />
                </div>
              </div>
            </dv-border-box11>
          </div>
        </el-col>
        <el-col :span="6">

          <div :style="{ height: 16 + 'vh',marginTop: '2%' }">
            <div style="padding: 1px; width: 94%; margin-left: 0%;background-color: #343a40;border-radius: 20px;" >
              <p class="weather-title" style="
                color: #eaeaea;
                text-align: center;
                margin: 10px 0;
                font-size: 1.2em;
              ">实时天气预告</p>
              <!--                      <rightchart1 :poleId="poleId"></rightchart1>-->
              <div class="weather-embed">
                <img
                  src="/weather.png"
                  style="
                    transform: scale(0.8);
                    width: 120%;
                    margin-top: -8%;
                    border-radius: 10px;
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: -5%;
                  "
                >
              </div>
            </div>
          </div>
          <div :style="{ height: 24.2 + 'vh', marginTop: '48%' }">
            <div style="
              height: 150%;
              margin-left: 0%;
              width: 94%;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgb(52, 58, 64);
              border-radius: 20px;
            ">
              <TemperatureLineChart style="width: 90%; height: 90%;" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


</template>



<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { MostlyCloudy } from '@element-plus/icons-vue'
import { Swiper as TSwiper, SwiperItem as TSwiperItem } from 'tdesign-vue-next'
import 'tdesign-vue-next/es/style/index.css'
import axios from 'axios'

import EZUIKitPlayer from '@/components/Player.vue'
import SoilRadarChart from '@/components/Com2.vue'
import TemperatureLineChart from '@/components/Com3.vue'
import SoilMoistureBarChart from '@/components/Com1.vue'
import CameraControl from '@/components/Com4.vue'

// 声明组件


const currentDate = ref('')
const sensorData = ref([])
const farmName = ref('')
const farmSize = ref('')
const realData = ref([
  6.5,  // 土壤PH值 [0]
  25,   // 土壤含氮量 [1]
  20,   // 土壤温度 [2]
  72,   // 土壤湿度 [3]
  2.0   // 土壤电导率 [4]
])

const loading = ref(false)
const error = ref(null)

// 获取单位函数
const getUnit = (sensorName) => {
  const units = {
    '土壤含水率': '%',
    '土壤温度': '℃',
    '土壤电导率': 'mS/cm',
    '土壤PH值': '',
    '土壤氮含量': 'mg/kg'
  }
  return units[sensorName] || ''
}

// 获取传感器数据
const fetchSensorData = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await axios.get('/api/sensors', {
      params: { greenhouseId: 1 }
    })
    sensorData.value = response.data

    // 如果有数据，更新大棚信息和传感器数据
    if (response.data && response.data.length > 0) {
      const greenhouse = response.data[0]
      farmName.value = greenhouse.greenhouseName
      farmSize.value = greenhouse.greenhouseArea + ' 亩'

      // 更新realData数组
      response.data.forEach(sensor => {
        switch(sensor.name) {
          case '土壤PH值':
            realData.value[0] = sensor.value
            break
          case '土壤含氮量':
            realData.value[1] = sensor.value
            break
          case '土壤温度':
            realData.value[2] = sensor.value
            break
          case '土壤湿度':
            realData.value[3] = sensor.value
            break
          case '土壤电导率':
            realData.value[4] = sensor.value
            break
        }
      })
    }
  } catch (err) {
    error.value = '获取传感器数据失败'
    console.error('Error fetching sensor data:', err)
  } finally {
    loading.value = false
  }
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    weekday: 'long',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 添加计算属性
const sensorStatus = computed(() => ({
  nitrogen: realData.value[1] >= 20 && realData.value[1] <= 30 ? '优' : '良',
  temperature: realData.value[4] >= 18 && realData.value[4] <= 22 ? '优' : '良',
  moisture: realData.value[5] >= 70 && realData.value[5] <= 75 ? '优' : '良',
  conductivity: realData.value[6] >= 1.5 && realData.value[6] <= 2.5 ? '优' : '良'
}))

onMounted(() => {
  updateTime()
  const timer = setInterval(updateTime, 1000)
  fetchSensorData()
  const dataTimer = setInterval(fetchSensorData, 30000)

  onUnmounted(() => {
    clearInterval(timer)
    clearInterval(dataTimer)
  })
})
</script>



<style lang="less" scoped>
.home{
  background-image: url("../assets/OIP-C.jpg");
  height: 120%;
}
.cubeDigit {
  color: #fff;
  font-size: 1.2vw;
}

.data-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  p {
    margin: 0;
    color: #33f2dc;
  }
}

.sensor-background {
  height: 35%;
  width: 80%;
  margin-left: 10%;
  margin-top: 16%;
  background-color: rgba(192, 192, 192, 0.1);
}

.sensor-label {
  height: 30%;
  width: 80%;
  margin-left: 10%;
  margin-top: 7%;
  background-color: #495057;
  border-radius: 5px;

  p {
    position: relative;
    right: -10%;
    top: -21%;
    font-size: 15px;
    line-height: 400%;
    width: 80%;
    color: #eaeaea;
  }
}

.status-tag {
  height: 20%;
  width: 7%;
  line-height: 32px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 2px 2px 5px 2px rgba(11, 28, 55, 0.1);
  color: rgb(146, 219, 255);
  text-align: center;
  font-size: 15px;
  position: absolute;
  left: 12%;
  bottom: 58%;
}

.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 1vw;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5vw;
  height: 5vw;
  background-color: #495057;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
  }
}

.icon-image {
  width: 3.5vw;
  height: 3.5vw;
  object-fit: contain;
}

.icon-text {
  margin-top: 8px;
  color: white;
  font-size: 14px;
  text-align: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.el-dropdown {
  .el-dropdown-link {
    color: white !important;
    font-size: 14px;
    cursor: pointer;
  }
}

.nav-button {
  background-color: #495057;
  padding: 8px 16px;
  border-radius: 6px;
  margin-right: 2.6vw;
  transition: all 0.3s;

  &:first-child {
    margin-left: 5px;
  }

  &:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
  }
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;

  &:hover {
    color: white;
  }
}

.nav-text {
  color: white;
  font-size: 1vw;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 12px;
  background-color: rgb(52, 58, 64);
  border-radius: 20px;
}

.camera-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.camera-view {
  position: relative;
  width: 100%;
  height: calc(100% - 70px);
  background-color: #000;
  transition: all 0.3s ease;
}

.camera-controls-wrapper {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
  backdrop-filter: blur(5px);
  z-index: 1;
}

.camera-controls-center {
  position: relative;
  z-index: 2;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 173, 160, 0.2);
  }

  :deep(.control-button) {
    background: rgba(31, 173, 160, 0.1);
    border: 1px solid rgba(31, 173, 160, 0.3);
    color: #1fada0;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(31, 173, 160, 0.2);
      border-color: #1fada0;
      transform: scale(1.05);
    }

    &:active {
      transform: scale(0.95);
    }
  }
}

/* 添加响应式设计 */
@media screen and (max-width: 1400px) {
  .camera-view {
    height: calc(100% - 60px);
  }

  .camera-controls-wrapper {
    height: 60px;
  }
}

.weather-title {
  color: #eaeaea;
  text-align: center;
  margin: 10px 0;
  font-size: 1.2em;
}

.weather-embed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.layout-home {
  margin-top: 2.3%;
  width: 100%;
  height: 80%;
}

.monitor-panel {
  padding: 8px;
  padding-top: 13px;
  height: 29.5vh;
  margin-top: 0%;
  margin-left: 5%;
  background-color: #343a40;
  border-radius: 20px;
}

.panel-title {
  display: flex;
  color: white;
  justify-content: center;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.info-box {
  height: 100%;
  width: 40%;
  margin-left: 0%;
  margin-top: 0%;
  background-color: #495057;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.info-label {
  text-align: left;
  margin-top: 10%;
  margin-left: 6%;
  color: #eaeaea;
  font-size: 0.9vw;
  opacity: 0.8;
}

.info-value {
  position: absolute;
  left: 6%;
  top: 60%;
  transform: translateY(-50%);
  font-size: 1.5vw;
  color: #33f2dc;
  font-weight: 500;
}

</style>
